<template>
	<div class="newslist">
		<p style="margin:10px auto;width:90%;">新闻列表</p>
		<el-table
		    :data="tableData"
		    border
		    style="width:90%;margin:20px auto;">
		    <el-table-column
		      fixed
		      prop="date"
		      label="日期"
		      width="150">
		    </el-table-column>
		    <el-table-column
		      prop="name"
		      label="姓名"
		      width="120">
		    </el-table-column>
		    <el-table-column
		      prop="province"
		      label="省份"
		      width="120">
		    </el-table-column>
		    <el-table-column
		      prop="city"
		      label="市区"
		      width="120">
		    </el-table-column>
		    <el-table-column
		      prop="address"
		      label="地址"
		      width="300">
		    </el-table-column>
		    <el-table-column
		      prop="zip"
		      label="邮编"
		      width="120">
		    </el-table-column>
		    <el-table-column
		      fixed="right"
		      label="操作"
		      width="100">
		      <template slot-scope="scope">
                <nuxt-link style="color:#409EFF;" :to="`/news/newsdetail/${scope.row.id}`">查看</nuxt-link><br/>
		        <el-button type="text"  size="small" @click.native="handleEdit(scope.row)">编辑</el-button>
				<el-button type="text" align="center" @click.native="deleteNews(scope.row.id)">删除</el-button>
		      </template>
		    </el-table-column>
	  </el-table>
	  <!--编辑界面-->
		<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
		  <el-form :model="form" ref="form">		    
			  <el-form-item label="时间" :label-width="formLabelWidth" required>
			    <el-col :span="11">
			      <el-form-item  >
			        <el-date-picker type="date" placeholder="选择日期" v-model="form.date" ></el-date-picker>
			      </el-form-item>
			    </el-col>
			  </el-form-item>
		    <el-form-item label="新闻名称" :label-width="formLabelWidth" required>
		      <el-input v-model="form.name" autocomplete="off"></el-input>
		    </el-form-item>
		    <el-form-item label="省份" :label-width="formLabelWidth" required>
		      <el-input v-model="form.province" autocomplete="off"></el-input>
		    </el-form-item>
		    <el-form-item label="城市" :label-width="formLabelWidth" required>
		      <el-input v-model="form.city" autocomplete="off"></el-input>
		    </el-form-item>
		    <el-form-item label="地址" :label-width="formLabelWidth" required>
		      <el-input v-model="form.address" autocomplete="off"></el-input>
		    </el-form-item>
		    <el-form-item label="邮编" :label-width="formLabelWidth" required>
		      <el-input v-model="form.zip" autocomplete="off"></el-input>
		    </el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="dialogFormVisible = false">取 消</el-button>
		    <el-button type="primary" @click="confirmData('form')">确 定</el-button>
		  </div>
		</el-dialog>
		<!--编辑界面-->
	</div>
</template>
	
  

<script>
  import {newslist} from "~/api/apiv1"
  export default {
  	data() {
      return {
        tableData: [],
        data:[],
        dialogFormVisible: false,
        form: {
          id:'',
          date:'',
          name: '',
          province:'',
          city:'',
          address:'',
          zip:''
        },
        formLabelWidth: '120px'
      }
    },
    methods: {
      handleClick(row) {
        console.log(row);
      },
      //删除新闻
      deleteNews(id){
      	    //console.log(id);
		    this.$axios.$delete('http://localhost:3000/newslist/'+id)
		   	.then(res=>{
		   		this.$message.success('操作成功');
		   		this.$axios.$get('http://localhost:3000/newslist');
		   	})
		  	.catch(err=>{
		   		console.log(err);
		    })
       },
      //提交更改的新闻
      confirmData(formName){
      	 this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$axios.put('http://localhost:3000/newslist/'+this.form.id,  { 
			          date:this.form.date,
			          name:this.form.name,
			          province: this.form.province,
			          city: this.form.city,
			          address:this.form.address,
			          zip: this.form.zip
		    })   
		  .then(function (response) { 
		  	 console.log(response)
		  });
		  this.$message.success('修改成功')
		  this.dialogFormVisible=false;
          } else {
            console.log('error submit!!');
            return false;
          }
        });
        this.dialogFormVisible = false;
      },
     //弹框事件
     handleEdit(row) {
				this.dialogFormVisible = true;
				this.form = Object.assign({}, row);
			} 
    }, 

    mounted(){
    //得到新闻列表
   	this.$axios.$get('http://localhost:3000/newslist')
   	.then(res=>{
   		console.log(res);
   		this.tableData = res
/*   		console.log(this.tableData);*/
   	})
  	.catch(err=>{
   		console.log(err);
    })

  }
}
</script>


<style lang="scss" scoped>
  .newslist{
  	 padding:10px 20px;
  }

</style>
